<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>积分明细</title>

    <link href="../../../css/style.css" rel="stylesheet" type="text/css">
    <link href="../../../css/mui.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../../../src/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../src/style.css">
    <style>
        .mui-control-content { 
            background-color: white;
        }
        
        .mui-control-content .mui-loading {
            margin-top: 50px;
        }
        
        #integraldetail .mui-table-view .mui-table-view-cell {
            border-bottom: solid 1px #f0f0f0;
            margin: 0 15px;
            background: #fff;
        }
        
        .mui-table-view-cell {
            padding: 11px 3px;
        }
        
        .mui-segmented-control.mui-segmented-control-inverted {
            width: 50%;
            margin: 0 auto;
        }
        
        #segmentedControl {
            text-align: center;
        }
        
        #segmentedControl ul li {
            display: inline-block;
            width: 20%;
        }
        
        #segmentedControl a {
            width: 45%; 
            border: none;
            background: none;
            border-bottom: solid 2px #fff;
            line-height: 20px!important;
            overflow: inherit
        }
        
        .mui-segmented-control .mui-control-item.mui-active {
            border-bottom: solid 2px #23aae2!important;
            color: #23aae2!important;
        }
        
        #nowDate {
            margin-bottom: 0;
            background: none;
            font-size: 12px;
            color: #787d81;
            border: none;
        }
        
        .mui-navigate-right:after,
        .mui-push-left:after,
        .mui-push-right:after {
            color: #999da0;
            font-size: 18px;
        }
        
        .integralContent {
            border-radius: 100%;
        }
        
        .integralContent .mui-pull-left {
            color: #898989;
        }
        
        .integralContent .mui-pull-left p {
            color: #898989;
        }
        
        .integralContent .mui-pull-left span {
            color: #323232;
            padding-left: 10px;
        }
        
        .integralContent .mui-pull-right {
            color: #efa417;
            text-align: right;
            font-size: 16px;
            overflow: inherit;
        }
        
        .integralContent .mui-pull-left p {
            color: #949897;
        }
        
        .mui-table-view-cell>a:not(.mui-btn) {
            overflow: inherit;
        }
        
        .mui-table-view-cell:after {
            display: none;
        }
        
        .mui-content {
            background: none;
        }
        
        ul:after,
        .clearfix:after {}
        .mui-content .mui-pull-top-pocket {
				top:70px!important;
		} 
		.selectorType{
			width: 90%;
			margin: 0 auto;
			height: 50px;
			margin-top: 10px;
		}
		.selectorType span img{
			width: 15%;
			position: absolute;
			left: 20%;
			top: 10px;
		}
		.selectorType span{
			position: relative;
			width: 50%;
			display: inline-block;
			background: #eee;
			height: 50px;
			line-height: 50px;
			text-align: center;
			
			color: #999999;
			font-size: 14px;
		}
		.selectorType span:first-child{
			border-top-left-radius: 50px;
			border-bottom-left-radius: 50px;
			float: left;
		}
		.selectorType span:last-child{
			border-top-right-radius: 50px;
			border-bottom-right-radius: 50px;
		}
		.selectorType span.active{
			color: #fff;
			background: -webkit-linear-gradient(left, #f2b94e , #ffdd01); /* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(right, #f2b94e , #ffdd01e); /* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(right, #f2b94e , #ffdd01); /* Firefox 3.6 - 15 */
			background: linear-gradient(to right, #f2b94e , #ffdd01); /* 标准的语法 */
		}
    </style>
</head>

<body>
    <div class="mui-content">
		<div class="selectorType">
			<span class="active" id="person"><img src="../../../images/iconR.png" />个人</span>
			<span id="family"><img src="../../../images/iconF.png" />家庭</span>
		</div>
	</div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/jquery-1.8.3.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script>
    	$(function(){
    		$('.selectorType span').click(function(){
    			$('.selectorType span').removeClass('active');
    			$(this).addClass('active');
    		})
    		$('#person').click(function(){
    			$(this).find('img').attr('src','../../../images/iconR_c.png');
    			$('#family').find('img').attr('src','../../../images/iconF.png');
    			mui.fire(plus.webview.getWebviewById('integralrefresh'),'refreshFamily', {
    				refreType:0
    			})
    		})
    		$('#family').click(function(){
    			$(this).find('img').attr('src','../../../images/iconF_c.png');
    			$('#person').find('img').attr('src','../../../images/iconR.png')
    			mui.fire(plus.webview.getWebviewById('integralrefresh'), 'refreshFamily' ,{
    				refreType:1
    			})
    		})
    	})
    	
        mui.init({
				gestureConfig: {
					doubletap: true,
					longtap: true, //默认为false 
				},
				subpages: [{  
					url: 'integralrefresh.html',
					id: 'integralrefresh',
					styles: {  
						top: '110px', 
						bottom: '0'
					}
				}]
			});
        
            //处理返回键
        var backButtonPress = 0;
        mui.back = function(event) {
            var ws = plus.webview.currentWebview()
            if (ws) {
                ws.close();
            } else {
                backButtonPress++;
                if (backButtonPress > 1) {
                    plus.runtime.quit();
                } else {
                    plus.nativeUI.toast('再按一次退出应用');
                }
                setTimeout(function() {
                    backButtonPress = 0;
                }, 1000);
                return false;
            }
        };
        
    </script>
</body>

</html>